<template>
	<view>
		<view class="block__title">房屋信息</view>

		<view class="cu-form-group">
			<view class="title">小区</view>
			{{plotNum}}
		</view>


		<view class="cu-form-group">
			<view class="title">位置</view>
			<input v-model="repairLocal" placeholder="例 :1栋1单元1001室" class="text-right"></input>
		</view>


		<view class="block__title">报修信息</view>

		<view class="cu-form-group">
			<view class="title">报修人</view>
			{{userName}}
			<!-- <input v-model="bindRepairName" placeholder="请输入报修人" class="text-right"></input> -->
		</view>

		<view class="cu-form-group">
			<view class="title">报修类型</view>
			<picker bindchange="PickerChange" :value="carTypeIndex" :range="carTypes" :range-key="'typeName'"
				@change="chooseCarTypes">
				<view class="picker">
					{{carTypes[carTypeIndex].typeName?carTypes[carTypeIndex].typeName:'请选择'}}
				</view>
			</picker>
		</view>
		
<!-- 		<view class="cu-form-group">
			<view class="title">角色类型</view>
			<picker bindchange="PickerChange" :value="roleTypeIndex" :range="roleTypes" :range-key="'roleName'"
				@change="chooseRoleTypes">
				<view class="picker">
					{{roleTypes[roleTypeIndex].roleName?roleTypes[roleTypeIndex].roleName:"请选择"}}
				</view>
			</picker>
		</view> -->


		<view class="block__title">备注</view>
		<view class="cu-form-group">
			<textarea v-model="repairsMatter" placeholder="请输入报修内容"></textarea>
		</view>
		<!-- 		<view class="block__title">相关图片</view>

		<view class="cu-bar bg-white ">
			<view class="action">
				图片上传
			</view>
			<view class="action">
				{{imgList.length}}/4
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(img,index) in imgList" :key='index' bindtap="ViewImage"
					:data-url="imgList[index]">
					<image :src='imgList[index]' mode='aspectFill'></image>
					<view class="cu-tag bg-red" @tap="deleteImage(index)" :data-index="index">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
					<text class="cuIcon-cameraadd"></text>
				</view>
			</view>
		</view> -->

		<view class="button_up_blank"></view>

		<view class="sub_btn">
			<button class="btn" type="primary" @click="submitRepair()">提交</button>
		</view>

	</view>
</template>

<script>
	// pages/enterCommunity/enterCommunity.js
	// import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
	import {
		checkPhoneNumber,
		checkStrLength
	} from '../../lib/java110/utils/StringUtil.js'
	import context from '../../lib/java110/Java110Context.js'
	const constant = context.constant;
	const factory = context.factory;
	import {
		formatDate,
		formatHourAndMin
	} from '@/lib/java110/utils/DateUtil.js'

	export default {
		data() {
			return {
				
				plotNum: '', //小区名
				plotCommunityId: '', //小区id
				repairLocal: '', //报修位置
				newRepairCloums: '',
				plotCloums: '',
				communityName: '',
				minDate: new Date().getTime(),
				roomCloums: [],
				roomIdArr: [],
				roomName: "",
				roomId: '',
				roomShow: false,
				repairType: '',
				typeShow: false,
				timeShow: false,
				imgList: [],
				bindTel: '',
				repairsMatter: '',
				bindRepairName: '',
				userId: '',
				userName: '',
				photos: [],
				communityId: "",
				plotsIndex: 0,
				repairObjType: '001',
				repairObjId: '',
				repairObjName: '',
				bindState: '',
				
				carTypes:'', //工单类型
				workOrderId:'',
				roleId:'',
				carTypeIndex:"",
				
				// roleTypes:"", // 角色类型
				// roleId:'',
				// carTypeIndex:"",
				// roleTypeIndex:'',
				
				typeName:"",
				roleName:'',
				
				userPhone:'',
				

			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			//加载报修小区
			// that.loadRepairPlots();
			// that.loadType();
			that.chooseCar();
			// that.chooseRole();
			let identity = uni.getStorageSync("bindUserInfo");
			that.bindState = identity.bindState
			let userInfoId = uni.getStorageSync("commonUser");
			that.userId = userInfoId.id
			that.userName = userInfoId.name
			that.userPhone = userInfoId.phone
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let _plotNum = uni.getStorageSync("_selectCommunity");
			// this.plotNum = _plotNum.communityName + "小区";

			if (_plotNum != null && _plotNum != undefined && _plotNum != '') {
				this.plotNum = _plotNum.communityName;
				this.plotCommunityId = _plotNum.id; //小区id
				console.log("小区ID", this.plotCommunityId)
				// uni.setStorageSync('plotCommunityId', this.plotCommunityId);
			}
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},


		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			
			// 角色
			// chooseRole(){
			// 	let _plotNum = uni.getStorageSync("_selectCommunity");
			// 	this.plotCommunityId = _plotNum.id; //小区id
			// 	uni.request({
			// 		url: constant.url.repaiRole,
			// 		header: context.getHeaders(),
			// 		method: "GET",
			// 		data: {
			// 			page:1,
			// 			row:2000,
			// 			communityId: this.plotCommunityId,
			// 		},
			// 		success: (res) => {
			// 			this.roleTypes = res.data.data
			// 			console.log("查询角色",this.roleTypes)
			// 		},
			// 		fail: function(e) {
			// 			wx.showToast({
			// 				title: "服务器异常了",
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 		}
			// 	});
			// },
			
			// 工单类型
			chooseCar(){
				let _plotNum = uni.getStorageSync("_selectCommunity");
				this.plotCommunityId = _plotNum.id; //小区id
				uni.request({
					url: constant.url.repairOrder,
					header: context.getHeaders(),
					method: "GET",
					data: {
						communityId: this.plotCommunityId,
					},
					success: (res) => {
						this.carTypes = res.data.data
						console.log("查询工单",this.carTypes)
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			// 查询小区
			loadRepairPlots() {
				uni.request({
					url: constant.url.preOrder,
					header: context.getHeaders(),
					method: "GET",
					data: {
						communityName: '',
						pageNo: 1,
						pageSize: 20
					},
					success: (res) => {
						this.plotCloums = res.data.result.records
						this.plotCloums = this.plotCloums.map((item, index) => {
							return Object.assign({}, {
								'communityName': item.communityName,
								// 'tagName': item.name
							})
						})
						let newPlotCloums = [];
						for (let item in this.plotCloums) {
							newPlotCloums.push(this.plotCloums[item].communityName);
						}
						this.plotCloums = newPlotCloums
						// 下面是得到的结果
						console.log("小区", this.plotCloums)
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				} else if (type === 'month') {
					return `${value}月`;
				} else if (type === 'day') {
					return `${value}日`;
				}
				return value;
			},

			submitRepair: function() {
				let _plotNum = uni.getStorageSync("_selectCommunity");
				this.plotCommunityId = _plotNum.id; //小区id
				// if(this.bindState == 1){
				let obj = {
					"appointmentTime": "",
					"communityId": this.plotCommunityId,
					"phone": this.userPhone,
					"place": this.repairLocal,
					"repairsMatter": this.repairsMatter, //报修内容
					"poolId": '',
					"repairPicture": "",
					"roleId":this.roleId,
					"repairsPerson": this.userName,
					"roleName":  this.roleName,
					"workOrderId":  this.workOrderId,
					"userId": this.userId

				}
				console.log(obj);

				let _photos = this.photos;
				_photos.forEach(function(_item) {
					obj.photos.push({
						"photo": _item
					});
				});

				let msg = "";
				// if (obj.repairType == "") {
				// 	msg = "请选择报修类型";
				// if (obj.repairsPerson == "") {
				// 	msg = "请填写报修人";
				// } else if (checkStrLength(obj.repairsPerson) > 10) {
				// 	msg = "报修人长度不能超过5位";
				// } else if (obj.phone == "") {
				// 	msg = "请填写手机号";
				// } else if (!checkPhoneNumber(obj.phone)) {
				// 	msg = "手机号有误";
				// } else 
				if (obj.repairsMatter == "") {
					msg = "请填写报修内容";
				}

				if (msg != "") {
					wx.showToast({
						title: msg,
						icon: 'none',
						duration: 2000
					});
				} else {
					uni.request({
						url: constant.url.saveOwnerRepair,
						header: context.getHeaders(),
						method: "POST",
						data: obj, //动态数据
						success: function(res) {
							console.log("123", res)
							let _json = res.data;
							if (_json.code == 0) {
								uni.redirectTo({
									url: '/pagesB/myRepair/myRepair',
								});
								return;
							}
							wx.showToast({
								title: _json.msg,
								icon: 'none',
								duration: 2000
							})
						},
						fail: function(e) {
							wx.showToast({
								title: "服务器异常了",
								icon: 'none',
								duration: 2000
							})
						}
					});

				}
				// }else{
				// 	wx.showToast({
				// 		title: "您不是该小区成员,请确认身份",
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// }

			},
			afterRead: function(event) {
				const {
					file
				} = event.detail;

				let _that = this;

				const {
					photoList = []
				} = this;
				photoList.push(file);
				this.photoList = photoList;

				factory.base64.urlTobase64(file.path).then(function(_baseInfo) {
					_that.photos.push(_baseInfo);
				});
				console.log("data信息：", this);
			},
			deleteImage: function(e) {
				console.log(e);
				let imageArr = this.$data.imgList;
				imageArr.splice(e, 1);
				this.photos.splice(e, 1);
			},
			ChooseImage: function(e) {
				let that = this;
				wx.chooseImage({
					count: 4, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res);
						that.$data.imgList.push(res.tempFilePaths[0]);
						var tempFilePaths = res.tempFilePaths[0]

						//#ifdef H5
						TanslateImage.translate(tempFilePaths, (url) => {
							that.photos.push(url);
						})
						//#endif

						//#ifdef MP-WEIXIN
						factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
							that.photos.push(_res);
						});
						//#endif
					}
				});
			},
			plotChange: function(e) {
				this.communityName = this.plotCloums[e.detail.value];
			},
			chooseCarTypes: function(e) {
				this.carTypeIndex = e.target.value //取其下标
				this.workOrderId = this.carTypes[this.carTypeIndex].workOrderId //获取选中的数组
				this.typeName = this.carTypes[this.carTypeIndex].typeName //获取选中的数组
				this.roleId = this.carTypes[this.carTypeIndex].roleId //获取选中的数组
				console.log("报修类型",this.roleId)
			},
			
			dateChange: function(e) {
				this.bindDate = e.detail.value;
			},
			timeChange: function(e) {
				this.bindTime = e.detail.value;
			},

		}
	};
</script>
<style lang="scss" scoped>
	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 40rpx;
	}

	.sub_btn {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0rpx;

		.btn {
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
		}
	}
</style>
